<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <link
      href="https://cdn.bootcdn.net/ajax/libs/daisyui/2.51.5/full.css"
      rel="stylesheet"
    /> -->
    <link rel="stylesheet" href="/dist/css/index.css" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <header class="relative">
        <nav class="px-5 py-3 bg-sky-500">
          <!-- left-area -->
          <div class="flex items-center pr-10">
            <!-- logo -->
            <div class="logo mr-5">
              <svg
                width="32"
                height="32"
                class="UP8CN"
                viewBox="0 0 32 32"
                version="1.1"
                aria-labelledby="unsplash-home"
                aria-hidden="false"
              >
                <desc lang="en-US">Unsplash logo</desc>
                <title id="unsplash-home">Unsplash Home</title>
                <path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path>
              </svg>
            </div>
            <!-- search -->
            <div
              class="search relative w-full lg:w-96 text-gray-500 hover:-my-px hover:border-1 hover:border-gray-500 hover:rounded-full"
            >
              <span
                type="submit"
                class="absolute top-0 left-4 mt-3 mr-4 hover:text-gray-800"
              >
                <svg
                  class="h-4 w-4 fill-current"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  version="1.1"
                  id="Capa_1"
                  x="0px"
                  y="0px"
                  viewBox="0 0 56.966 56.966"
                  style="enable-background: new 0 0 56.966 56.966"
                  xml:space="preserve"
                  width="512px"
                  height="512px"
                >
                  <path
                    d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
                  />
                </svg>
              </span>
              <input
                type="search"
                name="serch"
                placeholder="Search high-resolution images"
                class="bg-gray-300 h-10 w-full px-10 rounded-full text-sm focus:outline-none placeholder:text-slate-500"
              />
            </div>
            <!-- catelist -->
            <div
              class="hidden md:block md:w-80 lg:w-56 lg:ml-10 nav-cate ml-5 text-gray-600 text-sm"
            >
              <ul class="flex justify-between">
                <li class="hover:text-gray-800"><a href="#">Expore</a></li>
                <li class="hover:text-gray-800"><a href="#">Advertise</a></li>
                <li class="hover:text-gray-800"><a href="#">Unsplash+</a></li>
              </ul>
            </div>
          </div>

          <!-- right-area -->
          <div class="absolute right-5 top-5">
            <!-- burger -->
            <div class="ml-5">
              <span>
                <a href="#">
                  <svg
                    width="24"
                    height="24"
                    class="BOTrp fill-gray-500 hover:fill-gray-800"
                    viewBox="0 0 24 24"
                    version="1.1"
                    aria-hidden="false"
                  >
                    <desc lang="en-US">navigation menu</desc>
                    <path
                      d="M3 16h18v2H3v-2ZM3 6v2h18V6H3Zm0 7h18v-2H3v2Z"
                    ></path>
                  </svg>
                </a>
              </span>
            </div>
          </div>
          <!-- dropdown-card -->
          <div
            class="absolute right-5 top-20 border rounded-md border-gray-300"
          >
            <ul class="w-56 my-4 mx-6">
              <li class="h-10 leading-10 hover:bg-gray-100 hover:rounded-md">
                <a href="#">
                  <!-- text-icon -->
                  <span class="float-left ml-2"
                    ><svg
                      class="inline-block"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M8 9.887c-.3-.408-.583-.854-.85-1.337a1.058 1.058 0 0 0-.4-.388A1.038 1.038 0 0 0 6.225 8c-.417 0-.708.133-.875.4-.167.267-.158.575.025.925.3.583.642 1.137 1.025 1.662.383.525.8 1.046 1.25 1.563L3.3 16.9a.948.948 0 0 0-.275.7c0 .283.092.517.275.7a.948.948 0 0 0 .7.275.948.948 0 0 0 .7-.275L9 14l3.1 3.1.75-2.05-2.4-2.45a16.134 16.134 0 0 0 2.225-3.15A18.153 18.153 0 0 0 14.1 6H16c.283 0 .52-.096.712-.287A.968.968 0 0 0 17 5a.968.968 0 0 0-.288-.713A.967.967 0 0 0 16 4h-6V3a.97.97 0 0 0-.287-.713A.97.97 0 0 0 9 2a.967.967 0 0 0-.712.287A.968.968 0 0 0 8 3v1H2a.967.967 0 0 0-.712.287A.968.968 0 0 0 1 5c0 .283.096.521.288.713A.967.967 0 0 0 2 6h10.1c-.333.95-.742 1.846-1.225 2.688A13.916 13.916 0 0 1 9.05 11.15c-.4-.433-.75-.854-1.05-1.263Z"
                        fill="#111111"
                        fill-opacity="0.5"
                        clip-rule="evenodd"
                        fill-rule="evenodd"
                      ></path>
                      <path
                        d="M13.35 22c-.4 0-.687-.129-.862-.387-.175-.259-.196-.58-.063-.963l3.65-9.675c.1-.267.288-.496.563-.688.275-.191.562-.287.862-.287.283 0 .567.096.85.287.283.192.475.421.575.688l3.65 9.675c.133.383.113.704-.062.963-.175.258-.471.387-.888.387a.795.795 0 0 1-.5-.175 1.006 1.006 0 0 1-.325-.425l-.85-2.45H15.1l-.875 2.45a.947.947 0 0 1-.35.425.901.901 0 0 1-.525.175Zm5.95-4.8h-3.6l1.75-4.95h.1l1.75 4.95Z"
                        fill="#111111"
                        clip-rule="evenodd"
                        fill-rule="evenodd"
                      ></path></svg
                  ></span>
                  <!-- text -->
                  <span class="float-left ml-4 font-bold">English</span>
                  <!-- drop-icon -->
                  <span class="float-right"
                    ><svg
                      width="32"
                      height="32"
                      class="RUaiK inline-block fill-gray-300"
                      viewBox="0 0 24 24"
                      version="1.1"
                      aria-hidden="false"
                    >
                      <desc lang="en-US">Chevron down</desc>
                      <path
                        d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41Z"
                      ></path></svg></span
                ></a>
              </li>
              <li class="h-10 leading-10 hover:bg-gray-100 hover:rounded-md">
                <a href="#">
                  <!-- text-icon -->
                  <span class="float-left ml-2"
                    ><svg
                      class="inline-block"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M8 9.887c-.3-.408-.583-.854-.85-1.337a1.058 1.058 0 0 0-.4-.388A1.038 1.038 0 0 0 6.225 8c-.417 0-.708.133-.875.4-.167.267-.158.575.025.925.3.583.642 1.137 1.025 1.662.383.525.8 1.046 1.25 1.563L3.3 16.9a.948.948 0 0 0-.275.7c0 .283.092.517.275.7a.948.948 0 0 0 .7.275.948.948 0 0 0 .7-.275L9 14l3.1 3.1.75-2.05-2.4-2.45a16.134 16.134 0 0 0 2.225-3.15A18.153 18.153 0 0 0 14.1 6H16c.283 0 .52-.096.712-.287A.968.968 0 0 0 17 5a.968.968 0 0 0-.288-.713A.967.967 0 0 0 16 4h-6V3a.97.97 0 0 0-.287-.713A.97.97 0 0 0 9 2a.967.967 0 0 0-.712.287A.968.968 0 0 0 8 3v1H2a.967.967 0 0 0-.712.287A.968.968 0 0 0 1 5c0 .283.096.521.288.713A.967.967 0 0 0 2 6h10.1c-.333.95-.742 1.846-1.225 2.688A13.916 13.916 0 0 1 9.05 11.15c-.4-.433-.75-.854-1.05-1.263Z"
                        fill="#111111"
                        fill-opacity="0.5"
                        clip-rule="evenodd"
                        fill-rule="evenodd"
                      ></path>
                      <path
                        d="M13.35 22c-.4 0-.687-.129-.862-.387-.175-.259-.196-.58-.063-.963l3.65-9.675c.1-.267.288-.496.563-.688.275-.191.562-.287.862-.287.283 0 .567.096.85.287.283.192.475.421.575.688l3.65 9.675c.133.383.113.704-.062.963-.175.258-.471.387-.888.387a.795.795 0 0 1-.5-.175 1.006 1.006 0 0 1-.325-.425l-.85-2.45H15.1l-.875 2.45a.947.947 0 0 1-.35.425.901.901 0 0 1-.525.175Zm5.95-4.8h-3.6l1.75-4.95h.1l1.75 4.95Z"
                        fill="#111111"
                        clip-rule="evenodd"
                        fill-rule="evenodd"
                      ></path></svg
                  ></span>
                  <!-- text -->
                  <span class="float-left ml-4 font-bold">Mode</span>
                  <!-- drop-icon -->
                  <span class="float-right"
                    ><svg
                      width="32"
                      height="32"
                      class="RUaiK inline-block fill-gray-300"
                      viewBox="0 0 24 24"
                      version="1.1"
                      aria-hidden="false"
                    >
                      <desc lang="en-US">Chevron down</desc>
                      <path
                        d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41Z"
                      ></path></svg></span
                ></a>
              </li>
              <li class="h-10 leading-10 hover:bg-gray-100 hover:rounded-md">
                <a href="#">
                  <!-- text-icon -->
                  <span class="float-left ml-2"
                    ><svg
                      class="inline-block"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M8 9.887c-.3-.408-.583-.854-.85-1.337a1.058 1.058 0 0 0-.4-.388A1.038 1.038 0 0 0 6.225 8c-.417 0-.708.133-.875.4-.167.267-.158.575.025.925.3.583.642 1.137 1.025 1.662.383.525.8 1.046 1.25 1.563L3.3 16.9a.948.948 0 0 0-.275.7c0 .283.092.517.275.7a.948.948 0 0 0 .7.275.948.948 0 0 0 .7-.275L9 14l3.1 3.1.75-2.05-2.4-2.45a16.134 16.134 0 0 0 2.225-3.15A18.153 18.153 0 0 0 14.1 6H16c.283 0 .52-.096.712-.287A.968.968 0 0 0 17 5a.968.968 0 0 0-.288-.713A.967.967 0 0 0 16 4h-6V3a.97.97 0 0 0-.287-.713A.97.97 0 0 0 9 2a.967.967 0 0 0-.712.287A.968.968 0 0 0 8 3v1H2a.967.967 0 0 0-.712.287A.968.968 0 0 0 1 5c0 .283.096.521.288.713A.967.967 0 0 0 2 6h10.1c-.333.95-.742 1.846-1.225 2.688A13.916 13.916 0 0 1 9.05 11.15c-.4-.433-.75-.854-1.05-1.263Z"
                        fill="#111111"
                        fill-opacity="0.5"
                        clip-rule="evenodd"
                        fill-rule="evenodd"
                      ></path>
                      <path
                        d="M13.35 22c-.4 0-.687-.129-.862-.387-.175-.259-.196-.58-.063-.963l3.65-9.675c.1-.267.288-.496.563-.688.275-.191.562-.287.862-.287.283 0 .567.096.85.287.283.192.475.421.575.688l3.65 9.675c.133.383.113.704-.062.963-.175.258-.471.387-.888.387a.795.795 0 0 1-.5-.175 1.006 1.006 0 0 1-.325-.425l-.85-2.45H15.1l-.875 2.45a.947.947 0 0 1-.35.425.901.901 0 0 1-.525.175Zm5.95-4.8h-3.6l1.75-4.95h.1l1.75 4.95Z"
                        fill="#111111"
                        clip-rule="evenodd"
                        fill-rule="evenodd"
                      ></path></svg
                  ></span>
                  <!-- text -->
                  <span class="float-left ml-4 font-bold">Contact</span>
                  <!-- drop-icon -->
                  <span class="float-right"
                    ><svg
                      width="32"
                      height="32"
                      class="RUaiK inline-block fill-gray-300"
                      viewBox="0 0 24 24"
                      version="1.1"
                      aria-hidden="false"
                    >
                      <desc lang="en-US">Chevron down</desc>
                      <path
                        d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41Z"
                      ></path></svg></span
                ></a>
              </li>
            </ul>
          </div>
        </nav>
      </header>
      <main>
        <div class="banner">
          <div class="title"></div>
          <div class="description"></div>
          <div class="banner-search"></div>
        </div>
        <div class="card-area"></div>
        <div class="card-area"></div>
      </main>
      <footer></footer>
    </div>
  </body>
</html>
